<template>
  <div>
    <slot name="title">
      {{ title }}
    </slot>
    <div :style="{width:'50%'}">
      <area-chart :="config"></area-chart>
    </div>
  </div>
</template>

<script>
import {AreaChart} from '@opd/g2plot-vue'

export default {
  name: "areachart",
  components: {
    AreaChart
  },
  props: {
    title: {
      type: String,
      default: ''
    }, valueData: {
      type: Array,
      default: function () {
        return [
          {time: '1991', value: 60},
          {time: '1992', value: 65},
          {time: '1993', value: 70},
          {time: '1994', value: 75},
          {time: '1995', value: 42},
          {time: '1996', value: 60},
          {time: '1997', value: 72},
          {time: '1998', value: 90},
          {time: '1999', value: 0},
        ];
      }
    },


  }, data() {
    return {

      config: {
        height: 150,
        autoFit: true,

        xField: 'time',
        yField: 'value',
        smooth: true,
        meta: {
          value: {
            max: 200,
          },
        },
        data: this.valueData
      },

    }

  }

}
</script>

<style scoped>

</style>